<template>
  <div class="aside">
    <el-container>
      <!--  -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="collapse" @click="showCollapse">|||</div>

        <el-menu
          :default-openeds="['1', '3']"
          router
          :default-active="activePath"
          :collapse="isCollapse"
          :collapse-transition="false"
          ref="menu"
          @select="keep"
        >
          <!-- index 的值elementUI中是String类型，item.id是Number类型,所以加上空字符串转成字符串类型 -->
          <el-submenu
            :index="item.id + ''"
            v-for="(item, index) in menuList"
            :key="index"
          >
            <template slot="title">
              <i :class="icons[index]"></i>
              <span>{{ item.authName }}</span>
            </template>

            <!-- 二级菜单 -->
            <!-- :index="childItem.id + ''" -->
            <!-- :index="'/home/' + childItem.path" -->
            <el-menu-item
              :index="childItem.path"
              v-for="(childItem, index) in item.children"
              :key="index"
            >
              <i class="el-icon-menu"></i>
              <span>{{ childItem.authName }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      menuList: [],
      // 左侧菜单图标
      icons: [
        "el-icon-user",
        "el-icon-s-operation",
        "el-icon-goods",
        "el-icon-edit-outline",
        "el-icon-data-line",
      ],

      // 是否折叠侧边栏
      isCollapse: false,

      // 激活的侧边菜单
      activePath:'studio'
    };
  },
  computed: {
    // 激活侧边栏的二级菜单
    path() {
      // 
      return window.location.pathname.substr(6);
    },
  },
  created() {
    this.getAsideData();

    if(sessionStorage.getItem('navkeep')){
      this.activePath = sessionStorage.getItem('navkeep')
    }
  },
  methods: {
    // 获取侧边栏数据
    getAsideData() {
      // 
      this.axios({
        method: "get",
        url: "/menus",
      })
        .then((res) => {
          
          if (res.data.meta.status == 200) {
            this.menuList = res.data.data;
            // 
          }
        })
        .catch((err) => {
          
        });
    },

    showCollapse() {
      this.isCollapse = !this.isCollapse;
    },

    keep(){
      sessionStorage.setItem('navkeep',this.$refs.menu.activeIndex);
    }
  },
};
</script>

<style lang="less" scoped>
.aside {
  // border: 1px solid red;
  // width: 200px;
  background-color: #2d3a4b;
  min-height: 505px;
  margin-top: 70px;
}
/deep/ .el-container {
  // border: 1px solid #00f;
  position: sticky;
  top: 70px;
  left: 0;
}
.el-aside {
  // border: 1px solid red;
  overflow: hidden;
}
/deep/ .el-main {
  background-color: #2d3a4b;
}
.el-menu {
  background-color: #2d3a4b;
  border-right: none;
}
/deep/ .el-submenu {
  // border: 1px solid red;

  .el-menu {
    // background-color: #2d3a4b;
    color: #fff;

    .el-menu-item {
      background-color: #2d3a4b;
      color: #fff;
      /deep/ &:hover,
      &:focus {
        // border: 1px solid red;
        background-color: #26303d;
      }
    }
  }
}
/deep/.el-submenu__title {
  color: #fff;
  &:hover {
    // border: 1px solid red;
    background-color: #26303d;
  }
}
/deep/ .el-submenu__title i {
  color: #fff;
}


// 设置滚动条的宽高
::-webkit-scrollbar {
  width: 6px;
}

// 设置滚动条的滑轨背景色
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

// 滑块颜色
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

// 设置滚动条两端的按钮
::-webkit-scrollbar-button {
  background-color: #eee;
  display: none;
}

.collapse {
  // border: 1px solid #000;
  background-color: #2d3a4b;
  // width: 36px;
  height: 36px;
  color: #fff;
  cursor: pointer;
  text-align: center;
  line-height: 36px;
  letter-spacing: 3px;
  user-select: none;
}
</style>

<style lang="less">
// /deep/ .el-menu--vertical {
//   border: 1px solid red;

//   /deep/ .el-menu--popup-right-start {
//     background-color: #2d3a4b !important;
//     /deep/.el-menu-item {
//       background-color: #2d3a4b;
//     }
//   }
// }
</style>